<template>
    <div>
        <el-table
            :data="tableData"
            :stripe="_option.stripe"
            :height="_option.height"
            :maxHeight="_option?.maxHeight"
            :size="_option.size"
            :showHeader="_option.showHeader"
            :tooltipEffect="_option.tooltipEffect"
            :row-style="_option.rowStyle"
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
            @cell-click="handleCellClick">
            <template  >
                <!---复选框, 序号 (START)-->
                <el-table-column
                    
                    v-if="col.type === 'index' || col.type === 'selection' || col.type === 'expand'"
                    :align="col.align"
                    :label="col.label"
                    :type="col.type"
                    :index="indexMethod"
                    :width="col.width" />
                <!---复选框, 序号 (END)-->
                <!---图片 (START)-->
                <el-table-column
                    v-else-if="col.type === 'image'"
                    :align="col.align"
                    :label="col.label"
                    :width="col.width">
                    <template #default="{ row }">
                        <!-- 如需更改图片size，可自行配置参数 -->
                        <el-avatar :size="50" shape="square" :src="row[col.prop!]" />
                    </template>
                </el-table-column>
                <!---图片 (END)-->
                <!-- 自定义slot (START) -->
                <el-table-column
                    :show-overflow-tooltip="col.showOverflowTooltip"
                    v-else-if="col.slot"
                    :align="col.align"
                    :label="col.label"
                    :width="col.width">
                    <template #default="scope">
                        <slot :name="col.slot" :row="scope.row" :index="scope.$index"></slot>
                    </template>
                </el-table-column>
                <!-- 自定义slot (END) -->
                <!-- 如果传递按钮数组，就展示按钮组 START-->
                <el-table-column
                    :show-overflow-tooltip="col.showOverflowTooltip"
                    v-else-if="col.buttons?.length"
                    :align="col.align"
                    :label="col.label"
                    :width="col.width">
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                v-for="(btn, index) in col.buttons"
                                size="small"
                                :key="index"
                                :type="btn.type"
                                @click="handleAction(btn.command, scope)"
                                >{{ btn.name }}</el-button
                            >
                        </el-button-group>
                    </template>
                </el-table-column>
                <!-- 如果传递按钮数组，就展示按钮组 END-->
                <!-- 默认渲染列 (START) -->
                <el-table-column
                    :show-overflow-tooltip="col.showOverflowTooltip"
                    v-else
                    :label="col.label"
                    :prop="col.prop"
                    :align="col.align"
                    :width="col.width" />
                <!-- 默认渲染列 (END) -->
            </template>
        </el-table>
        <!-- 分页器 -->
        <div v-if="_option.showPagination" class="mt20">
            <el-pagination
                v-bind="_paginationConfig"
                @size-change="pageSizeChange"
                @current-change="currentPageChange" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import{ computed,} from 'vue'
interface TableProps {
    tableData: Array<object> // table的数据
    column: Table.Column[] // 每列的配置项
    option?: Table.Option
}
const props = defineProps<TableProps>()
// 设置option默认值，如果传入自定义的配置则合并option配置项
const _option: ComputedRef<Table.Option> = computed(() => {
    const option = {
        stripe: false,
        tooltipEffect: 'dark',
        showHeader: true,
        showPagination: false,
        rowStyle: () => 'cursor:pointer' // 行样式
    }
    return Object.assign(option, props?.option)
})
// 合并分页配置
const _paginationConfig = computed(() => {
    const config = {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40, 50, 100],
        layout: 'total, sizes, prev, pager, next, jumper'
    }
    return Object.assign(config, _option.value.paginationConfig)
})
interface EmitEvent {
    (e: 'selection-change', params: any): void // 当选择项发生变化时会触发该事件
    (e: 'row-click', row: any, column: any, event: Event): void // 当某一行被点击时会触发该事件
    (e: 'cell-click', row: any, column: any, cell: any, event: Event): void // 当某个单元格被点击时会触发该事件
    (e: 'command', command: string | number, row: any): void // 按钮组事件
    (e: 'size-change', pageSize: number): void // pageSize事件
    (e: 'current-change', currentPage: number): void // currentPage按钮组事件
}
const emit = defineEmits<EmitEvent>()
// 自定义索引
function indexMethod(index: number) {
    const tabIndex = index + (_paginationConfig.value.currentPage - 1) * _paginationConfig.value.pageSize + 1
    return tabIndex
}
// 切换pageSize
const pageSizeChange = (pageSize: number) => {
    emit('size-change', pageSize)
}
// 切换currentPage
const currentPageChange = (currentPage: number) => {
    emit('current-change', currentPage)
}
// 按钮组事件
const handleAction = (command: string | number, scope: any) => {
    emit('command', command, scope.row)
}
// 多选事件
const handleSelectionChange = (val: any) => {
    emit('selection-change', val)
}
// 当某一行被点击时会触发该事件
const handleRowClick = (row: any, column: any, event: Event) => {
    emit('row-click', row, column, event)
}
// 当某个单元格被点击时会触发该事件
const handleCellClick = (row: any, column: any, cell: any, event: Event) => {
    emit('cell-click', row, column, cell, event)
}
</script>
<style lang="scss" scoped></style>

